<template>
    <el-button size="small" style="position: absolute;top: 0;right: 0;" type="primary" @click="openDialog">修改参数
    </el-button>
    <el-dialog v-model="dialog.visible" :append-to-body='true' :title="dialog.title" width="50%"
               @close="dialog.visible = false">
        <el-form :model="modelValue" :rules="rules" label-width="120px">
            <el-table v-loading="materialTableLoading" :data="materialDataList"
                      highlight-current-row table-layout="fixed"
                      @current-change="handleCurrentChange"
            >
                <el-table-column type="default" width="50">
                    <template #default="scope">
                        <el-radio :model-value="materialFormData.id" :value="scope.row.id"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="材料" prop="name" width="150"/>
                <el-table-column align="center" label="单价" prop="price" width="150"/>
                <el-table-column align="center" label="颜色" prop="color" width="125"/>
                <el-table-column align="center" label="精度" prop="materialPrecision" width="125"/>
                <el-table-column align="center" label="备注" min-width="150" prop="remarks"/>
            </el-table>
        </el-form>
        <template #footer>
            <el-button @click="dialog.visible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import {defineEmits, defineProps, onActivated, onMounted, reactive, ref} from "vue";
import {getMaterialList} from "@/apis/material.js";
import {useVModel} from "@vueuse/core";

const props = defineProps({
    modelValue: {
        type: Object,
        default: {}
    }
})
const emits = defineEmits(['update:modelValue'])

const materialDataList = ref([]);
const materialTableLoading = ref(false);

const dialog = reactive({
    visible: false,
    title: "编辑打印参数"
})
const materialFormData = useVModel(props, 'modelValue', emits);
const rules = {
    name: [{required: true, message: '请输入材料名称', trigger: 'blur'}],
    price: [{required: true, message: '请输入单价', trigger: 'blur'}],
    color: [{required: true, message: '请输入颜色', trigger: 'blur'}],
    materialPrecision: [{required: true, message: '请输入精度', trigger: 'blur'}],
}
const openDialog = () => {
    dialog.visible = true;
}
/** 查询 */
const handleQuery = () => {
    materialTableLoading.value = true;
    getMaterialList()
        .then(({data}) => materialDataList.value = data.list)
        .finally(() => materialTableLoading.value = false);
}
/** 选中当前行 */
const handleCurrentChange = (newRow, oldRow) => {
    materialFormData.value = newRow
}

onMounted(() => {
    handleQuery();
});
onActivated(() => {
    handleQuery();
})
</script>

<style scoped>
.el-button {
    position: relative;
}
</style>